<template>
  <el-submenu :index="menuNav.id">
    <template #title>{{ menuNav.title }}</template>
    <template v-for="item in menuNav.children" :key="item.id">
      <moreMenu v-if="item.children && item.children.constructor === Array && item.children.length > 0" :menuNav="item" />
      <el-menu-item v-else :index="item.id" @click="goToPath(item)">
        {{ item.title }}
      </el-menu-item>
    </template>
  </el-submenu>
</template>

<script>
import { getCurrentInstance } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
export default {
  name: 'moreMenu',
  props: {
    menuNav: {
      type: Object,
    },
  },
  setup() {
    const store = useStore()
    const router = useRouter()
    // const { ctx } = getCurrentInstance() // 这个再生产环境取不到
    // const { proxy } = getCurrentInstance() // 使用proxy代替ctx，因为ctx只在开发环境有效
    function goToPath(route) {
      store.commit('setMenu', route)
      // router.push(route.url)
    }
    return { goToPath }
  },
}
</script>

<style scoped></style>
